<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">


    <div class="custom_table fix_width">
        <div class="thead">
            <div class="th">订单编号</div>
            <div class="th">订单创建时间</div>
            <div class="th">订单状态</div>
            <div class="th">总金额</div>
        </div>
        <div class="tbody">
            <div class="td">{$row.order_sn}元</div>
            <div class="td">{$row.createtime|date='Y-d-m H-i-s',###}</div>
            <div class="td">{$row.status_text}</div>
            <div class="td">{$row.money}元</div>
        </div>
    </div>

    <div class="custom_table fix_width">
        <div class="thead">
            <div class="th">首次上课时间</div>
            <div class="th">每周几上课</div>
            <div class="th">每周几几点上课</div>
            {if condition='$row.status==-2'}
            <div class="th">教师拒绝原因</div>
            {/if}
        </div>
        <div class="tbody">
            <div class="td">{$row.first_teacher}元</div>
            <div class="td">{$row.per_week}</div>
            <div class="td">{$row.per_week_time}</div>
            {if condition='$row.status==-2'}
            <div class="td">{$row.refund_reason}</div>
            {/if}
        </div>
    </div>

    <div class="flex_box fix_width">
        <div class="gay_box">
            <div class="tit">学生信息</div>
            <div class="userinfo">
                <div class="avatar">
                    <img src="{:cdnurl($user.avatar)}" alt="">
                </div>
                <div class="info">
                    <b>ID:{$user.id}</b>
                    <p>昵称：{$user.nickname}</p>
                    <p>手机号：{$user.mobile}</p>
                    <p>性别：{$user.sex}</p>
                    <p>地址：{$user.addr}</p>
                    <p>年级：{$row.grade_name}</p>
                    <p>科目：{$row.subject_name}</p>
                    <p>基本情况：{$user.state}</p>
                </div>
            </div>
        </div>

        {notempty name='teacher'}
        <div class="gay_box">
            <div class="tit">教师信息</div>
            <div class="userinfo">
                <div class="avatar">
                    <img src="{:cdnurl($teacher.avatar)}" alt="">
                </div>
                <div class="info">
                    <b>ID:{$teacher.user_id}</b>
                    <p>昵称：{$teacher.nickname}</p>
                    <p>性别：{$teacher.sex}</p>
                    <p>真实姓名：{$teacher.realname}</p>
                    <p>手机号：{$teacher.mobile}</p>
                </div>
            </div>
        </div>
        {/notempty}
    </div>



    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="reset" class="btn btn-primary btn-embossed btn-close" onclick="Layer.closeAll();">{:__('Close')}</button>
        </div>
    </div>
</form>

<style>
    .fix_width{
        width: 800px;
        margin: 0 auto;
    }
    .flex_box{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }
    .gay_box{
        width: 380px;
    }
    .gay_box .tit{
        font-size: 18px;
        font-weight: bold;
    }
    .userinfo{
        display: flex;
        align-items: center;
    }
    .userinfo .avatar{
        width: 80px;
        margin-right: 20px;
    }
    .userinfo .avatar img{
        width: 80px;
    }
    .userinfo .info b{
        padding: 0;
        margin: 0;
    }
    .userinfo .info p{
        padding: 0;
        margin: 0;
    }


    .custom_table{
        display: flex;
        flex-wrap: wrap;
        margin-top: 0!important;
        flex-direction: column;
    }
    .custom_table .thead{
        display: flex;
    }
    .custom_table .thead .th{
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #f2f2f2;
        border: 1px solid #a1a1a1;
    }
    .custom_table .tbody{
        display: flex;
    }
    .custom_table .tbody .td{
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #a1a1a1;
        border-top: 0;
    }

    @media (orientation: portrait){
        .fix_width{
            width: 100%;
        }
        .flex_box{
            flex-direction: column;
            margin-top: 0;
        }
        .gay_box{
            margin-top: 40px;
        }

        .custom_table{
            flex-direction: row;
            flex-wrap: nowrap;
        }
        .custom_table .thead{
            flex-direction: column;
            flex-wrap: wrap;
            width: 50%;
        }
        .custom_table .thead .th{
            border: 0;
        }
        .custom_table .tbody .td{
            border: 0;
        }
        .custom_table .tbody{
            flex-direction: column;
        }
    }

</style>